<template>
  <div class="tp">
    <Header />

    <Content>
      <div class="cp">
        <div class="card">
          <div class="c-title"> 库存详情 </div>

          <div class="line"></div>

          <div class="c-body">
            <a-row :gutter="[8, 18]" align="middle">
              <a-col span="16">
                <a-row :gutter="[8, 18]">
                  <a-col span="3" class="f-label"> 商品名称 </a-col>
                  <a-col span="9" class="f-value">
                    {{ detail.goodsName }}
                  </a-col>

                  <a-col span="3" class="f-label"> 商品分类 </a-col>
                  <a-col span="9" class="f-value">
                    {{ detail.libCategoryName }}
                  </a-col>

                  <a-col span="3" class="f-label"> 商品规格 </a-col>
                  <a-col span="9" class="f-value">
                    {{ detail.specs }}
                  </a-col>

                  <a-col span="3" class="f-label"> 库存数量 </a-col>
                  <a-col span="9" class="f-value">
                    {{ detail.lastSyncStock || '0' }}{{ detail.saleUnit }}
                  </a-col>
                </a-row>
              </a-col>
              <a-col offset="4" span="4">
                <a-flex vertical gap="small" align="center">
                  <div class="f-label">库存状态</div>
                  <div class="f-tag" :style="`background-color:${detail.stackStatus===1?'#31b89a':'#c40'};`"
                    >{{ getLabel(stockStatus, detail.stackStatus) }}
                  </div>
                </a-flex>
              </a-col>
            </a-row>

            <BasicTable
              @register="registerTable"
              :dataSource="detail.stockDetailBeanList"
              :scroll="{ y: 320 }"
              style="margin: 8px -2px 0"
            >
              <template #action="{ record }">
                <TableAction
                  :divider="true"
                  :actions="[
                    {
                      color: 'success',
                      label: '变更日志',
                      onClick: () => onChangeLog(record),
                    },
                  ]"
                />
              </template>
            </BasicTable>
          </div>
        </div>
      </div>
    </Content>
  </div>
</template>

<script setup>
  import { defineOptions, onMounted, ref } from 'vue';

  import { BasicTable, TableAction, useTable } from '@/components/Table';

  import Header from '@/widget/header.vue';
  import Content from '@/widget/content.vue';
  import { POST } from '@/api/http';
  import { getLabel, stockStatus, stockType } from '@/api/ds';
  import { useRoute, useRouter } from 'vue-router';

  defineOptions({ name: 'StockDetail' });

  const route = useRoute(),
    router = useRouter();

  const { goodsSn = null } = route.query;
  const detail = ref({});

  onMounted(() => {
    loadData();
  });

  async function loadData() {
    detail.value = (await POST('/product/getStockDetail', { goodsSn })) ?? {};
  }

  const [registerTable] = useTable({
    pagination: false,
    columns: [
      {
        title: '库存类型',
        dataIndex: 'stockType',
        ellipsis: false,
        customRender: ({ value }) => getLabel(stockType, value),
      },

      {
        title: '库存数量',
        dataIndex: 'stock',
        ellipsis: false,
        customRender: ({ value }) => `${value || '0'}${detail.value.saleUnit || ''}`,
      },
    ],
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    rowKey: 'id',
    actionColumn: {
      title: '操作',
      align: 'center',
      width: 160,
      dataIndex: 'action',
      fixed: 'right',
      slots: { customRender: 'action' },
    },
  });

  function onChangeLog({ stockType, goodsSn }) {
    router.push(`/stock/list/detail/change-log?stockType=${stockType}&goodsSn=${goodsSn}`);
  }
</script>
<style lang="less" scoped>
  .card {
    padding: 12px;

    .c-title {
      color: #333;
      font-size: 14px;
      font-weight: 500;
    }

    .line {
      margin: 0 -12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #f0f0f0;
    }

    .c-body {
      padding: 18px 12px;
    }
  }
</style>
